import 'package:flutter/material.dart';
import 'package:flutter_seekbar/flutter_seekbar.dart'
    show ProgressValue, SectionTextModel, SeekBar;

class SeekBarPageTwo extends StatefulWidget {
  const SeekBarPageTwo({Key key}) : super(key: key);

  @override
  _SeekBarPageTwoState createState() => _SeekBarPageTwoState();
}

class _SeekBarPageTwoState extends State<SeekBarPageTwo> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
   
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('拖动条'),
        ),
        body: sliderItem());
  }

  Widget sliderItem() {
    return Row(
      // crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,

      children: [
        Text('很不满意'),
        Container(
          // width: 240,
          height: 120,
          margin: EdgeInsets.all(10),
          child: buildThem(),
        ),
        Container(
            width: 40,
            padding: EdgeInsets.only(left: 12),
            margin: EdgeInsets.only(right: 10),
            decoration: BoxDecoration(
              color: Color(0xffECECEC),
              borderRadius: BorderRadius.all(
                Radius.circular(10),
              ),
            ),
            child: Text(
              '${_sliderValue.toStringAsFixed(0)}分',
              style: TextStyle(fontSize: 11, color: Color(0xff7E52DF)),
            )),
        Text('很满意'),
      ],
    );
  }

  //Slider的值
  double _sliderValue = 1;
  Widget buildThem() {
    return Theme(
      data: ThemeData(
        sliderTheme: SliderThemeData(
          trackHeight: 10,
          //滑块的颜色
          thumbColor: Colors.white,
          //滑块的大小
          thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10),

          //点击滑块边缘的颜色
          overlayColor: Colors.deepPurpleAccent.withOpacity(0.2),
          //点击滑块边缘的显示半径
          overlayShape: RoundSliderOverlayShape(overlayRadius: 20),
          //滑动左侧滚动条的颜色
          activeTrackColor: Color(0xff7546E6),
          //滚动条右侧的颜色
          inactiveTrackColor: Color(0xffEDE8FA),
          // //任何情况都显示气泡
          showValueIndicator: ShowValueIndicator.never,
          // //气泡的文字样式
          // valueIndicatorTextStyle: TextStyle(color: Colors.white),
          // //气泡的背景
          // valueIndicatorColor: Colors.redAccent,
        ),
      ),
      child: buildSliderWidget(),
    );
  }

  Widget buildSliderWidget() {
    return Slider(
      //Slider的当前的值  0.0 ~ 1.0
      value: _sliderValue,
      min: 0,
      max: 5,
      //平均分成的等分
      divisions: 5,
      //滚动时会回调
      onChanged: (double value) {
        _sliderValue = value;
        print("Value $_sliderValue");
        setState(() {});
      },
      onChangeStart: (double startValue) {
        print("开始滚动");
      },
      onChangeEnd: (double endValue) {
        print("停止 滚动");
      },
      //滑块以及滑动左侧的滚动条颜色
      // activeColor: Colors.redAccent,
      //滑块右侧的滚动条颜色
      // inactiveColor: Colors.blue,
      //气泡
      label: "${_sliderValue.toStringAsFixed(1)}",
    );
  }
}
